<template>
	<div id="login-page">
		<van-nav-bar title="登录" left-arrow @click-left="$router.back()">
			<template #right>
				<van-icon name="ellipsis" size="18" />
			</template>
		</van-nav-bar>
		<van-image
			width="3.2rem"
			height="3.2rem"
			src="	http://s.weituibao.com/1582958061265/mlogo.png"
		/>

		<van-form @submit="onSubmit">
			<van-field
				v-model="username"
				name="username"
				label="用户名"
				placeholder="用户名"
				:rules="rules.username"
			/>
			<van-field
				v-model="password"
				type="password"
				name="password"
				label="密码"
				placeholder="密码"
				:rules="rules.password"
			/>
			<div class="reg-text"><a href="#/reg">立即注册</a></div>
			<div style="margin: 16px">
				<van-button round block type="info" native-type="submit"
					>登录</van-button
				>
			</div>
		</van-form>
	</div>
</template>

<script>
// import Vue from "vue";
// import axios from "axios";
// Vue.prototype.$axios = axios;

export default {
	name: "Login",
	data() {
		return {
			username: "",
			password: "",
			rules: {
				username: [
					{
						required: true,
						message: "请填写用户名",
					},
				],
				password: [
					{
						required: true,
						message: "请填写密码",
					},
				],
			},
		};
	},
	created() {
		const { username } = this.$route.query;
		this.username = username;
	},
	mounted() {
		this.$parent.showTabbar = false;
	},
	destroyed() {
		this.$parent.showTabbar = true;
	},
	methods: {
		// onSubmit(values) {
		// 	this.$axios
		// 		.post("/user/login", {
		// 			username: values.username,
		// 			password: values.password,
		// 		})
		// 		.then((data) => {
		// 			if (data.data.code === 401) {
		// 				this.$notify({ type: "danger", message: "用户名或密码错误" });
		// 				// this.$toast('用户名或密码错误')
		// 			} else if (data.data.code === 200) {
		// 				// console.log("data", data);
		// 				localStorage.setItem("userInfo", JSON.stringify(data.data));
		// 				// 解构默认值：解构失败时（undefined）使用默认值
		// 				const { targetUrl = "/home" } = this.$route.query;
		// 				this.$router.replace(targetUrl);
		// 			}
		// 		});
		// },
		// -----------------------------------------------------------------
		async onSubmit(values) {
			const { data, resultCode } = await this.$axios.post("/user/login", {
				loginName: values.username,
				passwordMd5: this.$md5(values.password),
			});
			// console.log(data);
			if (resultCode == 200) {
				localStorage.setItem("token", data);
				// 解构默认值：解构失败时（undefined）使用默认值
				const { targetUrl = "/home" } = this.$route.query;
				this.$router.replace(targetUrl);
				localStorage.setItem("loginName", values.username);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
#login-page {
	.van-image {
		width: 150px !important;
		height: 150px !important;
		left: 50%;
		transform: translate(-50%);
		margin-top: 20px;
	}

	.van-form {
		padding: 15px;
		.reg-text {
			a {
				font-size: 14px;
				color: #1989fa;
				display: inline-block;
				margin-top: 20px;
				margin-left: 20px;
			}
		}
		.van-button--info {
			color: #fff;
			background-color: rgb(27, 174, 174);
			border: 1px solid rgb(27, 174, 174);
			.van-button__content {
				background: rgb(27, 174, 174);
				border-color: rgb(27, 174, 174);
				.van-button__text {
					color: rgb(255, 255, 255);
				}
			}
		}
	}
}
</style>
